<template>
  <div class="box">
    <el-card>
      <el-form :rules="rules" ref="form" :model="form" label-width="100px">
        <el-row>
          <div class="title">
            <div class="title-val">{{ estllist.name }}</div>
          </div>
          <el-col :span="6">
            <el-form-item label="任务来源" prop="classname">
              <el-input v-model="form.classname" placeholder="请输入任务来源" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="督办编号">
              <el-input v-model="form.code" placeholder="自动生成" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="18">
            <el-form-item label="任务标题" prop="keytask">
              <el-input v-model="form.keytask" placeholder="请输入任务标题" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="工作举措" prop="tasknote">
              <el-input
                type="textarea"
                maxlength="500"
                show-word-limit
                :autosize="{ minRows: 5, maxRows: 5 }"
                v-model="form.tasknote"
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="完成标准" prop="standstr">
              <el-input
                type="textarea"
                maxlength="500"
                show-word-limit
                :autosize="{ minRows: 5, maxRows: 5 }"
                v-model="form.standstr"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="备注">
              <el-input
                type="textarea"
                maxlength="500"
                show-word-limit
                :autosize="{ minRows: 5, maxRows: 5 }"
                v-model="form.note"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="说明">
              <el-input
                type="textarea"
                maxlength="500"
                show-word-limit
                :autosize="{ minRows: 5, maxRows: 5 }"
                v-model="form.remark"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-col :span="24" class="btn-Add">
        成果与限制时间：
        <el-button type="primary" @click="oldAdd">增加行</el-button>
      </el-col>
      <el-table :data="tableData" style="width: 100%" height="400" border>
        <el-table-column fixed="left" label="操作" width="120" align="center">
          <template slot-scope="scope">
            <el-button @click="oldDel(scope.row, scope.$index)" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>

        <el-table-column label="预期标志性成果" min-width="400" :autosize="{ minRows: 5, maxRows: 5 }">
          <template slot-scope="scope">
            <el-input
              type="textarea"
              maxlength="500"
              show-word-limit
              v-model="scope.row.objective"
              :autosize="{ minRows: 3, maxRows: 5 }"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="time" label="要求完成时间" min-width="180">
          <template slot-scope="scope">
            <el-date-picker v-model="scope.row.enddate" type="date" value-format="yyyy-MM-dd" placeholder="选择日期">
            </el-date-picker>
          </template>
        </el-table-column>

        <el-table-column prop="person" label="责任部门" min-width="230">
          <template slot-scope="scope">
            <!-- <el-input disabled placeholder="请选择部门" v-model="scope.row.workdpname" class="input-with-select">
              <el-button
                slot="append"
                icon="el-icon-zoom-in"
                @click="Clickcurr(scope.$index, 'workdpname')"
              ></el-button>
            </el-input> -->

            <el-input v-model="scope.row.workdpname" :readonly="true" disabled clearable>
              <el-button
                slot="prepend"
                type="primary"
                icon="el-icon-plus"
                @click="Clickcurr(scope.$index, 'workdpname')"
              ></el-button>
              <el-button
                slot="append"
                type="danger"
                icon="el-icon-close"
                @click="onClaerbm(scope.$index, 'workdpname')"
              ></el-button>
            </el-input>
          </template>
        </el-table-column>

        <el-table-column prop="otherdpname" label="配合部门" min-width="230">
          <template slot-scope="scope">
            <!-- <el-input disabled placeholder="请选择部门" v-model="scope.row.otherdpname" class="input-with-select">
              <el-button slot="append" icon="el-icon-zoom-in" @click="Clickcust(scope.$index, 'cust')"></el-button>
            </el-input> -->
            <el-input v-model="scope.row.otherdpname" :readonly="true" disabled clearable>
              <el-button
                slot="prepend"
                type="primary"
                icon="el-icon-plus"
                @click="Clickcust(scope.$index, 'cust')"
              ></el-button>
              <el-button
                slot="append"
                type="danger"
                icon="el-icon-close"
                @click="onClaerbm(scope.$index, 'cust')"
              ></el-button>
            </el-input>
          </template>
        </el-table-column>
      </el-table>

      <el-button type="primary" @click="onSave">保存</el-button>
      <el-button type="primary" @click="Sure">继续添加</el-button>
    </el-card>
    <renyuanbm :visiblesbm="visiblesbm" @fatherbm="visiblesbm = false" @onChoosebm="onChoosebm"></renyuanbm>
  </div>
</template>

<script>
import renyuanbm from '@/views/jichuxinxi/zuzhirenyuan/renyuandalog/renyuanbm.vue'

import { QueryInfoByID } from '@/api/Project/index'
import { Save, TaskQueryInfoByID, QueryDetailByTaskID, Deldetail } from '@/api/task/index'
export default {
  name: 'TasklistAdd',
  // props: ['dialogVisible'],
  components: { renyuanbm },
  data() {
    return {
      visiblesbm: false,
      Clickcurrindex: '',
      rybm: '',
      estllist: {
        name: ''
      },
      form: {
        classname: this.$route.query.source,
        code: '',
        keytask: '',
        tasknote: '',
        standstr: '',
        note: '',
        remark: ''
      },
      tableData: [],
      rules: {
        classname: [{ required: true, message: '任务来源为必填项', trigger: 'blur' }],
        // keytask: [{ required: true, message: '任务标题为必填项', trigger: 'blur' }],
        tasknote: [{ required: true, message: '工作举措为必填项', trigger: 'blur' }],
        standstr: [{ required: true, message: '完成标准为必填项', trigger: 'blur' }]
      }
    }
  },
  watch: {
    $route(to, from) {
      const ble = to.fullPath.startsWith('/Fourth/Tasklist/TasklistAdd')

      if (ble) {
        this.onSearch()
      }
    }
  },
  created() {
    console.log(this.form)
    this.onSearch()
  },
  methods: {
    // 获取子组件穿回来的值
    onChoosebm(row) {
      console.log(row)
      this.tableData.forEach((item, index) => {
        console.log(index)
        console.log(this.Clickcurrindex)
        if (index == this.Clickcurrindex) {
          // item.workdpid = row.id
          // item.workdpname = row.orgname
          if (this.rybm == 'workdpname') {
            this.$set(item, 'workdpid', row.id)
            this.$set(item, 'workdpname', row.orgname)
          } else {
            this.$set(item, 'otherdpid', row.id)
            this.$set(item, 'otherdpname', row.orgname)
          }
        }
      })
    },
    //点击责任部门
    Clickcurr(row, name) {
      this.rybm = name
      this.Clickcurrindex = row
      this.visiblesbm = true
    },
    Clickcust(row, name) {
      this.rybm = name
      this.Clickcurrindex = row
      this.visiblesbm = true
    },
    // 协办部门 删除
    onClaerbm(index, bmbh) {
      if (bmbh == 'workdpname') {
        this.tableData[index].workdpid = ''
        this.tableData[index].workdpname = ''
      } else {
        this.tableData[index].otherdpid = ''
        this.tableData[index].otherdpname = ''
      }
    },
    // 查询
    async onSearch() {
      this.form = {
        classname: this.$route.query.source || '',
        code: '',
        keytask: '',
        tasknote: '',
        standstr: '',
        note: '',
        remark: ''
      }
      this.tableData = []
      if (this.$route.query.state == 'A') {
        const { content } = await QueryInfoByID({ id: this.$route.query.id })
        this.estllist = content
      }
      if (this.$route.query.state == 'U') {
        this.FdnIfan(this.$route.query.id)
        this.AvtTime(this.$route.query.id)
      }
    },
    // 获取基础信息 this.$route.query.id
    async FdnIfan(rowID) {
      const res = await TaskQueryInfoByID({ id: rowID })
      if (res.content == null) {
        this.form = {
          proid: this.$route.query.id
        }
      } else {
        this.form = res.content
      }
    },
    // 获取成果与时间
    async AvtTime(rowID) {
      const result = await QueryDetailByTaskID({ id: rowID })
      this.tableData = result.content
    },
    // 保存
    onSave(data) {
      if (this.tableData.length != 0) {
        this.$refs.form.validate(async valid => {
          if (valid) {
            this.tableData.forEach(item => {
              if (item.id == undefined) {
                item.id = 0
              }
            })
            const blan = this.tableData.every(item => {
              return (
                item.objective == '' ||
                item.objective == undefined ||
                item.enddate == '' ||
                item.enddate == undefined ||
                item.workdpname == '' ||
                item.workdpname == undefined
              )
            })
            if (this.form.id == undefined) {
              this.form.id = 0
              this.form.proid = this.estllist.id
              this.form.userid = this.estllist.userid
              this.form.username = this.estllist.username
              this.form.dpid = this.estllist.dpid
              this.form.dpname = this.estllist.dpname
              this.form.rowindex = ''
            }
            this.form.detail = this.tableData
            if (!blan) {
              const res = await Save(this.form)
              if (res.success == true) {
                if (data == 'empty') {
                  this.$message.success(res.message)
                  this.form = {}
                  this.tableData = []
                } else {
                  this.FdnIfan(res.docid)
                  this.AvtTime(res.docid)
                  this.$message.success(res.message)
                }
              } else {
                this.$message.error(res.message)
              }
            } else {
              this.$message.error('成果与限制时间必填项未填写')
            }
          } else {
            this.$message.error('请检查必填项')
            return false
          }
        })
      } else {
        this.$message.error('成果与限制时间必须有一条数据')
      }
    },
    Sure() {
      this.onSave('empty')
    },
    // 删除
    async oldDel(row, index) {
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          if (row.id) {
            await Deldetail({ id: row.id })
            this.$message.success('删除成功!')
            this.AvtTime()
          } else {
            this.tableData.splice(index, 1)
            this.$message.success('删除成功!')
          }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 增加行
    oldAdd() {
      this.tableData.push({})
    }
  }
}
</script>

<style scoped>
.box >>> .el-select {
  width: 93%;
}
.title {
  display: flex;
  justify-content: center;
}
.title-val {
  font-weight: 700;
  font-size: 20px;
  padding-bottom: 15px;
}
.btn-Add {
  padding: 20px 0;
}

.box {
  padding: 20px;
  background-color: #fdfbf2;
}
.el-card {
  background-color: transparent;
}
.box >>> .el-table,
.el-table__expanded-cell {
  background-color: transparent;
  /* border: 1px solid #000; */
}

.box >>> input {
  background-color: transparent;
}

.box >>> .el-table th {
  background-color: transparent !important;
  /* border: 1px solid #000; */
}
.box >>> .el-table tr {
  background-color: transparent !important;
  /* border: 1px solid #000; */
}
.box >>> .el-link {
  border-bottom: 1px solid #13ce66;
}

.box >>> .el-textarea__inner {
  background-color: transparent !important;
}
</style>
